<script setup lang="ts">
import {ref} from "vue";

const code = ref('')
</script>

<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header-box">
      <t-btn>执 行</t-btn>
      <t-btn ghost>美 化</t-btn>
    </div>

    <!-- 代码区 -->
    <div class="editor-box">
      <!-- 编辑区 -->
      <t-editor class="editor" v-model="code" lang="dsql"/>
      <!-- 参数区 -->
      <t-editor class="editor-param" lang="json"/>
    </div>

    <!-- 内容区 -->
    <div class="result-box">
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  /* 强制显示滚动条 */
  overflow: auto;
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
  padding: 0 30px;
}

.header-box {
  position: sticky;
  z-index: 100;
  background-color: #f5f7fa;
  top: 0;
}

.editor-box {
  height: 80%;
  display: flex;
  gap: 15px;
}

.editor-box .editor {
  min-width: 768px;
  flex: 0 0 70%; /* 固定占据70%宽度 */
}

.editor-box .editor-param {
  flex: 1; /* 占据剩余空间 */
}


/* 响应式布局：当屏幕宽度小于768px时，改为垂直布局 */
@media (max-width: 768px) {
  .editor-box {
    flex-direction: column;
    height: auto; /* 让高度自适应内容 */
  }

  .editor-box .editor {
    flex: none;
    height: 300px; /* 设置固定高度，你可以根据需要调整 */
  }

  .editor-box .editor-param {
    flex: none;
    height: 300px; /* 与左边编辑器相同的高度 */
  }
}
</style>